<template>
  <form action="/">
    <van-search
        v-model="searchText"
        show-action
        placeholder="请输入要搜索的用户昵称"
        @search="onSearch"
        @cancel="onCancel"
    />
  </form>
  <div style="padding: 12px">
    <van-button block type="primary" @click="doSearchResult">搜索</van-button>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import {useRouter} from "vue-router";

const router = useRouter()

const searchText = ref('');

/**
 * 搜索过滤
 * @param val
 */
const onSearch = (val) => {
  console.log(typeof val);
}
const onCancel = () => {
  searchText.value = '';
};


/**
 * 执行搜索
 */
const doSearchResult = () => {
  router.push({
    path: '/user/searchResult',
    query: {
      username: searchText.value
    }
  })
}

</script>

<style scoped>

</style>
